<template>
  <ElRadioGroup v-if="widget.elProps.type === 'radio'" v-model="formModel[widget.id]" v-bind="widget.elProps">
    <ElRadio v-for="(item, index) in options" :key="index" :label="item.dictValue">
      {{ item.dictLabel }}
    </ElRadio>
  </ElRadioGroup>
  <ElRadioGroup v-else-if="widget.elProps.type === 'button'" v-model="formModel[widget.id]" v-bind="widget.elProps">
    <ElRadioButton v-for="(item, index) in options" :key="index" :label="item.dictValue">
      {{ item.dictLabel }}
    </ElRadioButton>
  </ElRadioGroup>
</template>
<script setup lang="ts" name="RadioWidget">
import { ElRadioGroup, ElRadio, ElRadioButton } from "element-plus";
import { ref, watch } from "vue";
import dictDataApi from "@/views/system/dict-data/api";
const props = defineProps({
  widget: {
    type: Object
  },
  formModel: {
    type: Object
  }
});
const options = ref([]);
watch(
  () => props.widget!.elProps.dictType,
  async dictType => {
    if (dictType) {
      options.value = await dictDataApi.list({ dictType });
    } else {
      options.value = [];
    }
  },
  {
    immediate: true
  }
);
</script>
<style lang="scss" scoped></style>
